<template>
  <div class="google-map-box">
    <el-row :gutter="20">
      <el-col :span="6">
      <!--<el-form-item label="Map">
        <el-input v-model="input" @focus="geolocate" placeholder="Add your Address" name="googleMapInput"></el-input>
        <input v-model="lat" type="hidden" name="lat"></input>
        <input v-model="lng" type="hidden" name="lng"></input>
      </el-form-item>-->
        <el-form-item style="margin-bottom:1em;">
          <el-input v-model="input" @focus="geolocate" placeholder="" name="googleMapInput"></el-input>
          <input v-model="lat" type="hidden" name="lat"></input>
          <input v-model="lng" type="hidden" name="lng"></input>
        </el-form-item>
      </el-col>
      <el-col :span="3" class="search-top" style="min-width:130px;">
        <el-button @click="googleSearch" type="primary"  icon="el-icon-search" style="width:100%;padding:7px 5px;">{{$t('m.SearchMap')}}</el-button>
      </el-col>
      <el-col :span="3" class="search-top" style="min-width:90px;">
        <el-button @click="clearSearch" type="info" style="width:100%;padding:7px 5px;">{{$t('m.Clear')}}</el-button>
      </el-col>
    </el-row>
    <p style="line-height: 100%;margin-top:0;color: #5a5e66;">{{$t('m.Youcanmovethepin')}}</p>
    <!--<div v-show="isInitMap" class="init-map">-->
      <div id='myMap' ref="googlemap">google map</div>
  </div>
</template>
<script>
import GoogleMapsLoader from 'google-maps'
export default {
  name: 'myMap',
  data () {
    return {
      isInitMap: false,
      input: '',
      lat: null,
      lng: null
    }
  },
  methods: {
    // message alert 用于前端错误提示信息
    messageToastErr (msg) {
      this.$message({
        showClose: true,
        message: msg,
        duration: 1500,
        type: 'error'
      })
    },
    /* 设置获得连相框地址后初始化地图 */
    fillInAddress () {
      let place = window.mapsObj.autocomplete.getPlace()
      if (place.geometry) {
        let lat = place.geometry.location.lat()
        let lng = place.geometry.location.lng()
        let latlng = {'lat': lat, 'lng': lng}
        this.initMap(latlng)
      } else if (place.name) {
        this.googleSearch()
      }
    },
    geolocate () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          }
          var circle = new window.mapsObj.googleObj.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          })
          window.mapsObj.autocomplete.setBounds(circle.getBounds())
        })
      }
    },
    /* Google Search */
    initMap (latlng) {
      this.isInitMap = true
      /* 初始化地图 */
      let map = new window.mapsObj.googleObj.maps.Map(document.getElementById('myMap'), {
        center: latlng,
        scrollwheel: true,
        zoom: 11
      })
      this.lat = latlng.lat
      this.lng = latlng.lng
      console.log(this.lat + ':' + this.lng)
      /* 设置标记 */
      let marker = new window.mapsObj.googleObj.maps.Marker({
        map: map,
        draggable: true,
        animation: window.mapsObj.googleObj.maps.Animation.DROP,
        position: latlng
      })
      /* 拖动marker设置经纬度坐标 */
      window.mapsObj.googleObj.maps.event.addListener(marker, 'dragend', (MouseEvent) => {
        map.setCenter(MouseEvent.latLng)
        var lat = MouseEvent.latLng.lat()
        var lng = MouseEvent.latLng.lng()
        this.lat = lat
        this.lng = lng
        console.log(this.lat + ':' + this.lng)
      })
    },
    /* After click buton to Google Search */
    googleSearch () {
      let address = document.getElementsByName('googleMapInput')[0].value
      if (address && address !== '') {
        let _self = this
        window.mapsObj.geocoder.geocode({'address': address}, function (results, status) {
          if (status === 'OK') {
            let lat = results[0].geometry.location.lat()
            let lng = results[0].geometry.location.lng()
            let latlng = {'lat': lat, 'lng': lng}
            _self.initMap(latlng)
          } else if (status === 'ZERO_RESULTS') {
            _self.messageToastErr('Zero Results')
          } else {
            console.log('Geocode was not successful for the following reason: ' + status)
          }
        })
      }
    },
    clearSearch () {
      document.getElementsByName('googleMapInput')[0].value = ''
      this.isInitMap = false
      GoogleMapsLoader.release(function () {
        console.log('No google maps api around')
      })
      this.$refs.googlemap.innerHTML = 'google map'
      this.lat = ''
      this.lng = ''
    }
  },
  updated () {
    window.mapsObj.autocomplete.addListener('place_changed', this.fillInAddress)
    /* GoogleMapsLoader.onLoad(function (google) {
      console.log('I just loaded google maps api')
    }) */
  }
}
</script>
<style>
#myMap{
  width:50%;
  height:300px;
  line-height:300px;
  color:#aeaeae;
  background: #fff;
  text-align:center;
  border: 1px solid #f0f0f0;
}
.search-top{
  margin-top:5px
}
</style>
